/*
 * @Author: zyk 997610780@qq.com
 * @Date: 2022-09-29 16:05:46
 * @LastEditors: zyk 997610780@qq.com
 * @LastEditTime: 2022-09-29 18:23:17
 * @FilePath: \fifty-small-projects\34动画倒计时\34.js
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */


let nums = document.querySelectorAll('.num')
let go_box = document.querySelector('.go')
let countdown_box = document.querySelector('.countdown')

function run(){
  nums.forEach((el,index)=>{
    let max = nums.length - 1
    el.addEventListener('animationend',function(e){
      if(e.animationName == 'goIn' && index != max){
        el.classList.remove('in')
        el.classList.add('out')
      }else if(e.animationName == 'goOut' && el.nextElementSibling){
        el.nextElementSibling.classList.add('in')
      }else{
        countdown_box.classList.add('hide')
        go_box.classList.add('show')
      }
    })
  })

}


function resetDom(){
  nums.forEach(el => el.className = 'num')
  go_box.classList.remove('show')
  countdown_box.classList.remove('hide')
  nums[0].classList.add('in')
}


let btn = document.querySelector('#btn')
btn.addEventListener('click',function(){
  resetDom()
  run()
})


run()